<template>
    <div>
        <a-form style="max-width: 500px; margin: 40px auto 0;">
            <a-form-item
                    label="项目名"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 17}"
                    :validate-status="validate.name.pass? '':'error'"
                    :help="validate.name.pass? '':validate.name.help"
            >
                <a-input v-model="project.name" placeholder="项目名采用横杠命名方式 如(aristotle-demo)"/>
            </a-form-item>
            <a-form-item
                    label="项目名(中文)"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 17}"
                    :validate-status="validate.chName.pass? '':'error'"
                    :help="validate.chName.pass? '':validate.chName.help"
            >
                <a-input v-model="project.chName" />
            </a-form-item>
            <a-form-item
                    label="项目端口"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 17}"
                    :validate-status="validate.port.pass? '':'error'"
                    :help="validate.port.pass? '':validate.port.help"
            >
                <a-input v-model="project.port" />
            </a-form-item>
            <a-form-item
                    label="数据库名"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 17}"
                    :validate-status="validate.dbName.pass? '':'error'"
                    :help="validate.dbName.pass? '':validate.dbName.help"
            >
                <a-input v-model="project.dbName" placeholder="数据库名采用下划线命名方式 如(ari_demo)"/>
            </a-form-item>
            <a-form-item
                    label="基础包名"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 17}"
                    :validate-status="validate.packageName.pass? '':'error'"
                    :help="validate.packageName.pass? '':validate.packageName.help"
            >
                <a-input v-model="project.packageName" placeholder="基础包名采用点分隔方式 如(org.aristotle.demo)"/>
            </a-form-item>
            <a-form-item :wrapperCol="{span: 17, offset: 7}">
                <a-button type="primary" @click="nextStep">下一步</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
    export default {
        name: 'Step1',
        data () {
            return {
                validate:{
                    name: {
                        pass: true,
                    },
                    chName: {
                        pass: true,
                    },
                    port: {
                        pass: true,
                    },
                    dbName: {
                        pass: true,
                    },
                    packageName: {
                        pass: true,
                    },
                },
            }
        },
        props:{
          project: Object,
        },
        methods: {
            verify() {
                let flag = true;
                if (this.project.name == undefined || this.project.name == '') {
                    this.validate.name.pass = false;
                    this.validate.name.help = '项目名不为空';
                    flag = false;
                } else {
                    this.validate.name.pass = true;
                }

                if (this.project.chName == undefined || this.project.chName == '') {
                    this.validate.chName.pass = false;
                    this.validate.chName.help = '项目名(中文)不为空';
                    flag = false;
                }else {
                    this.validate.chName.pass = true;
                }
                if (this.project.port == undefined || this.project.port == '') {
                    this.validate.port.pass = false;
                    this.validate.port.help = '端口名不为空';
                    flag = false;
                }else {
                    this.validate.port.pass = true;
                }
                if (this.project.dbName == undefined || this.project.dbName == '') {
                    this.validate.dbName.pass = false;
                    this.validate.dbName.help = '数据库名不为空';
                    flag = false;
                }else {
                    this.validate.dbName.pass = true;
                }
                if (this.project.packageName == undefined || this.project.packageName == '') {
                    this.validate.packageName.pass = false;
                    this.validate.packageName.help = '包名不为空';
                    flag = false;
                }else {
                    this.validate.packageName.pass = true;
                }
                return flag;

            },

            nextStep () {
                if (!this.verify()) {
                    return;
                }
                this.$emit('changeProject',this.project);
                this.$emit('nextStep');
            }
        }
    }
</script>

<style scoped>

</style>
